<template>
    <div class="category">
        <el-form :inline="true" >
            <el-form-item label="分类名">
                <el-input  placeholder="请输入分类名"></el-input>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="onSubmit">查询</el-button>
            </el-form-item>
        </el-form>
        <el-table :data="categoryList" style="width: 100%" border stripe>
            <el-table-column type="index" :index="1">
            </el-table-column>
            <el-table-column prop="id" label="id" width="120">
            </el-table-column>
            <el-table-column prop="name" sortable label="分类名" width="120" :sort-method="nameSort">
            </el-table-column>
            <el-table-column label="属性">
                <template slot-scope="scope">
                    <el-tag v-for="tag in scope.row.attributesName" :key="tag" closable @close="handleClose(scope.row.attributesName,tag)" type="success">
                        {{tag}}
                    </el-tag>
                    <el-input class="input-new-tag" v-if="inputVisible" v-model="inputValue" ref="saveTagInput" size="small" @keyup.enter.native="handleInputConfirm" @blur="handleInputConfirm">
                    </el-input>
                    <el-button v-else class="button-new-tag" size="small" @click="showInput">+ 添加属性</el-button>
                </template>
            </el-table-column>
            <el-table-column fixed="right" label="操作" width="120">
                <template slot-scope="scope">
                    <el-button @click.native.prevent="deleteRow(scope.$index, tableData4)" type="text" size="small">
                        修改
                    </el-button>
                    <el-button @click.native.prevent="deleteRow(scope.$index, tableData4)" type="text" size="small">
                        移除
                    </el-button>
                </template>
            </el-table-column>
        </el-table>
    </div>
</template>
<script>
// @ 是 /src 的别名
export default {
    name: 'Category',
    props: {

    },
    data() {
        return {
            inputVisible: false,
            inputValue: '',
            categoryList: [{
                id: '10001',
                name: '校园',
                attributesName: ['学校', '年级', '班级']
            }, {
                id: '10002',
                name: '户外',
                attributesName: []
            }, {
                id: '10003',
                name: '交流会',
                attributesName: ['职业']
            }]
        }
    },
    methods: {
        deleteRow(index) {
            this.tableData4.splice(index, 1);
        },
        handleClose(attributesName, tag) {
            attributesName.splice(attributesName.indexOf(tag), 1);
        },

        showInput() {
            this.inputVisible = true;
            this.$nextTick(_ => {
                this.$refs.saveTagInput.$refs.input.focus();
            });
        },

        handleInputConfirm() {
            let inputValue = this.inputValue;
            if (inputValue) {
                this.dynamicTags.push(inputValue);
            }
            this.inputVisible = false;
            this.inputValue = '';
        },
        nameSort(a, b) {
            return a.name.localeCompare(b.name)
        }
    }
}
</script>
<style scoped lang="styl">
.el-tag+.el-tag {
    margin-left: 10px;
}

.button-new-tag {
    margin-left: 10px;
    height: 32px;
    line-height: 30px;
    padding-top: 0;
    padding-bottom: 0;
}

.input-new-tag {
    width: 90px;
    margin-left: 10px;
    vertical-align: bottom;
}
</style>